<template>
  <view class="course-container">
    <!-- 顶部导航 -->
    <view class="course-header">
      <uni-icons type="arrowleft" size="24" color="#333" @click="goBack"></uni-icons>
      <text class="header-title">已购课程</text>
      <view class="header-actions">
        <uni-icons type="search" size="24" color="#666"></uni-icons>
      </view>
    </view>

    <!-- 课程筛选 -->
    <view class="course-filter">
      <view class="filter-item" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">
        全部
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'inProgress' }" @click="setFilter('inProgress')">
        学习中
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'completed' }" @click="setFilter('completed')">
        已学完
      </view>
    </view>

    <!-- 课程列表 -->
    <scroll-view scroll-y class="course-list">
      <view class="empty-course" v-if="filteredCourses.length === 0">
        <image src="/static/course/empty-course.png" class="empty-image"></image>
        <text class="empty-text">暂无已购课程</text>
        <button class="browse-btn" @click="goToCourse">去课程中心</button>
      </view>

      <view v-else>
        <view
            v-for="course in filteredCourses"
            :key="course.id"
            class="course-item"
            @click="goToCourseDetail(course.id)"
        >
          <image :src="course.cover" class="course-cover"></image>

          <view class="course-info">
            <view class="course-header">
              <text class="course-title">{{ course.title }}</text>
              <text class="course-tag" :class="course.tagClass">{{ course.tag }}</text>
            </view>

            <text class="course-desc">{{ course.desc }}</text>

            <view class="progress-section">
              <text class="progress-text">学习进度：{{ course.progress }}%</text>
              <view class="progress-bar">
                <view class="progress-inner" :style="{ width: course.progress + '%' }"></view>
              </view>
            </view>

            <view class="course-footer">
              <text class="course-time">购买时间：{{ course.purchaseTime }}</text>
              <button class="continue-btn">继续学习</button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const activeFilter = ref('all');

// 课程数据
const courses = ref([
  {
    id: 1,
    title: '美睫基础入门课程',
    desc: '从零开始学习美睫基础知识',
    cover: '/static/course/course1.jpg',
    progress: 65,
    purchaseTime: '2023-06-15',
    status: 'inProgress',
    tag: '学习中',
    tagClass: 'learning'
  },
  {
    id: 2,
    title: '日式单根嫁接技术',
    desc: '掌握日式单根嫁接核心技术',
    cover: '/static/course/course2.jpg',
    progress: 30,
    purchaseTime: '2023-06-20',
    status: 'inProgress',
    tag: '学习中',
    tagClass: 'learning'
  },
  {
    id: 3,
    title: '开花睫毛进阶教程',
    desc: '高级开花技术精讲',
    cover: '/static/course/course3.jpg',
    progress: 100,
    purchaseTime: '2023-05-10',
    status: 'completed',
    tag: '已学完',
    tagClass: 'completed'
  },
  {
    id: 4,
    title: '睫毛胶水使用指南',
    desc: '不同胶水的特点与使用方法',
    cover: '/static/course/course4.jpg',
    progress: 100,
    purchaseTime: '2023-04-22',
    status: 'completed',
    tag: '已学完',
    tagClass: 'completed'
  }
]);

// 过滤后的课程
const filteredCourses = computed(() => {
  if (activeFilter.value === 'all') {
    return courses.value;
  }
  return courses.value.filter(course => course.status === activeFilter.value);
});

// 设置筛选条件
const setFilter = (filter) => {
  activeFilter.value = filter;
};

const goBack = () => {
  uni.navigateBack();
};

const goToCourse = () => {
  uni.switchTab({ url: '/pages/course/course' });
};

const goToCourseDetail = (id) => {
  uni.navigateTo({ url: `/pages/course/detail?id=${id}` });
};
</script>

<style lang="scss" scoped>
.course-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.course-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
  }

  .header-actions {
    width: 60rpx;
    text-align: right;
  }
}

.course-filter {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
  position: sticky;
  top: 80rpx;
  z-index: 10;

  .filter-item {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #666;
    position: relative;
    padding: 10rpx 0;

    &.active {
      color: #e54d42;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background-color: #e54d42;
        border-radius: 3rpx;
      }
    }
  }
}

.course-list {
  height: calc(100vh - 180rpx);
  padding: 20rpx;
}

.empty-course {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;

  .empty-image {
    width: 280rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .browse-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #e54d42, #ff6b6b);
    color: white;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}

.course-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  display: flex;

  .course-cover {
    width: 240rpx;
    height: 240rpx;
  }

  .course-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;

    .course-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .course-title {
        font-size: 30rpx;
        font-weight: 600;
        flex: 1;
      }

      .course-tag {
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;

        &.learning {
          background-color: #e6f7ff;
          color: #1890ff;
        }

        &.completed {
          background-color: #f6ffed;
          color: #52c41a;
        }
      }
    }

    .course-desc {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .progress-section {
      margin-bottom: 20rpx;

      .progress-text {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 10rpx;
      }

      .progress-bar {
        height: 8rpx;
        background-color: #f0f0f0;
        border-radius: 4rpx;
        overflow: hidden;

        .progress-inner {
          height: 100%;
          background: linear-gradient(90deg, #e54d42, #ff6b6b);
          border-radius: 4rpx;
        }
      }
    }

    .course-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .course-time {
        font-size: 24rpx;
        color: #999;
      }

      .continue-btn {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
        background-color: #e54d42;
        color: white;
        border: none;
      }
    }
  }
}
</style>